<!--
    by: yuanbiao 2020年09月27日
    name: x-drag
    notes:
-->
<template>
  <div ref="drag" :class="[prefixCls]"
    :draggable="false"
    @touchstart="clickHandler"
    @mousedown="clickHandler"
  >
    <slot></slot>
  </div>
</template>

<script>
import { debounce } from '@/script/utils.js'
const prefixCls = 'x-drag'
export default {
  name: 'x-drag',
  data() {
    return {
      prefixCls: prefixCls,
      zIndex: 1
    }
  },
  methods: {
    clickHandler: debounce(function (e) {
      let target = e.target || e.srcElement
      let dragItem = target.closest(`.${prefixCls}-item`)
      if (dragItem) {
        this.zIndex++
        dragItem.style.zIndex = this.zIndex
      }
    }, 100)
  }
}
</script>
